<template>
    <div class="setSlideImg-add">
        <el-form :model="eleForm" :rules="rules" label-width="70px" size="medium" ref="eleForm" @keyup.enter.native="onSubmit">
            <el-form-item label="地址" prop="slideImgUrl">
                <el-input v-model.trim="eleForm.slideImgUrl" style="width:200px" placeholder="请输入地址"></el-input>
            </el-form-item>
            <el-form-item label="图片" prop="slideImg">
                <div class="quan-img">
                    <div class="img-oper" v-if="eleForm.slideImg">
                        <img :src="eleForm.slideImg" alt="">
                        <div class="oper">
                            <span class="el-icon-zoom-in" @click="showBigImage(eleForm.slideImg)"></span>
                            <span style="margin-left:10px" class="el-icon-delete" @click="deleteImage"></span>
                        </div>
                    </div>
                    <el-upload v-else class="goods-img-upload" :action="imgUrl" :headers="getHeaders()" :show-file-list="false" :before-upload="handleBeforeUpload" :on-success="handleSuccess" name="setImg">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </div>
            </el-form-item>
        </el-form>
        <div style="text-align:center">
            <el-button @click="escClick">取消</el-button>
            <el-button type="primary" @click="onSubmit" :loading="submitLoading">提交</el-button>
        </div>
    </div>
</template>
<script>
// 发请求全部导入
import api from '@/api/setSlideImg/index'
// 工具
import tool from '@/utils/tool'
export default {
    data() {
        return {
            // 提交时避免重复点击
            submitLoading:false,
            // 角色
            opt_identity:tool.identity,
            // 上传照片地址
            imgUrl:this.$url.setImageUpload,
            // 图片放大
            // 接受的数组
            viewUrl:[],

            eleForm:{
                slideImg:'',
                slideImgUrl:'',
            },
            rules:{
                slideImg:[
                    {required:true,message:'请输入轮播图链接地址',trigger:'blur'},
                ],
                slideImgUrl:[
                    {required:true,message:'请选择图片',trigger:'blur'},
                ],
            },
        }
    },
    methods: {
        // 取消
        escClick(){
            this.$emit('dialogCancel')
        },
        // 提交
        onSubmit(){
            this.$refs.eleForm.validate(valid=>{
                if(!valid) return
                console.log(this.eleForm)
                this.submitLoading = true
                api.addSlideImg(this.eleForm).then(res=>{
                    this.submitLoading = false
                    if(res.code !==200 ) return
                    console.log(res)
                    this.$message.success('添加成功!')
                    this.$emit('dialogSubmit')
                })
            })
        },
        // 加token
        getHeaders(){
            var headers = {}
            headers["tokenKey"] = window.localStorage.getItem("tokenKey")
            return headers;
        },
        // 上传之前
        handleBeforeUpload(file){
            let isRightType = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/tiff' || file.type === 'image/bmp'||file.type === 'image/jpg';
            let is5M = file.size / 1024 / 1024 < 5;
            if (!isRightType) {
                this.$message.warning('上传图片只能是 JPG JPEG TIFF BMP PNG 格式!');
                return false
            }
            if (!is5M) {
                this.$message.warning('上传图片大小不能超过 5MB!');
                return false
            }
            return isRightType && is5M;
        },
        // 上传成功(这些参数fileList包含file包含res)
        handleSuccess(res,file,fileList){
            // 文件上传没有使用axios，这里的自己处理
            // 失效的时候，先清除，再去登录页
            if(res.code === 598){
                this.$message.warning(res.msg)
                localStorage.removeItem('tokenKey')
                localStorage.removeItem('by_menu')
                location.href = '/login'
            }

            if(res.code!==200) return
            this.eleForm.slideImg = res.data.filename
        },
        // 放大图片
        showBigImage(url){
            this.viewUrl = []
            this.viewUrl.push(url)
            window.createPreview(this.viewUrl)
        },
        // 删除图片
        deleteImage(){
            this.eleForm.slideImg = ''
        }
    },
    created() {
    },
    mounted() {
    },
}
</script>
<style lang="less" scoped>
.quan-img{
    height: 100px;
    line-height: 80px;
    overflow: hidden;
    .goods-img-upload{
        i{
            font-size: 18px;
            box-sizing: border-box;
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            color: #8c939d;
            width: 200px;
            height: 100px;
            line-height: 100px;
            text-align: center;
        }
    }
    .img-oper{
        position: relative;
        width: 200px;
        height: 100px;
        line-height: 100px;
        margin-right: 10px;
        img{
            width: 200px;
            height: 100px;
            border-radius: 6px;
            display: block;
        }
        .oper{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            transition: all 0.3s ease;
            border-radius: 6px;
            text-align: center;
            color: #fff;
            background-color: rgba(0, 0, 0, .5);
            box-sizing: border-box;
            opacity: 0;
            cursor: pointer;
            z-index: 10;
        }
    }
    .img-oper:hover .oper{
        opacity: 1;
    }
    .goods-img-upload i:hover {
        border-color: #00e28b;
    }
}
</style>